<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框（checkbox）全选/全不选/返选</title>
    <style>
        body,
        dl,
        dt,
        dd,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Tahoma;
            font-size: 12px;
        }

        label,
        input,
        a {
            vertical-align: middle;
        }

        label {
            padding: 0 10px 0 5px;
        }

        a {
            color: #09f;
            text-decoration: none;
        }

        a:hover {
            color: red;
        }

        dl {
            width: 120px;
            margin: 10px auto;
            padding: 10px 5px;
            border: 1px solid #666;
            border-radius: 5px;
            background: #fafafa;
        }

        dt {
            padding-bottom: 10px;
            border-bottom: 1px solid #666;
        }

        dt label {
            font-weight: 700;
        }

        p {
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            let oA = document.querySelector("a");
            let oInput = document.querySelectorAll("input");
            var oLabel = document.querySelector("label");

            var isCheckAll = function () {
                let n = 0
                for (let i = 1; i < oInput.length; i++) {
                    oInput[i].checked && n++
                }
                oInput[0].checked = n == oInput.length - 1;
                oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
            };

            oInput[0].onclick = function () {
                for (let i = 1; i < oInput.length; i++) {
                    oInput[i].checked = this.checked
                }
                isCheckAll()
            };

            oA.onclick = function () {
                for (var i = 1; i < oInput.length; i++) {
                    oInput[i].checked = !oInput[i].checked
                }
                isCheckAll()
            };

            for (let i = 1; i < oInput.length; i++) {
                oInput[i].onclick = function () {
                    isCheckAll()
                }
            }
        }
    </script>
</head>

<body>
    <dl>
        <dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
        <dd>
            <p><input type="checkbox" name="item" /><label>选项（一）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（二）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（三）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（四）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（五）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（六）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（七）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（八）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（九）</label></p>
            <p><input type="checkbox" name="item" /><label>选项（十）</label></p>
        </dd>
    </dl>
    <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
</body>

</html>